<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
    <style>
        body{
            margin: 0 auto;
            text-align: center;
            background-image: url("img/img.png");
            background-size: cover;
        }
    </style>
</head>
<body>
<h1 style="color: white">修改页面</h1>
<div>
    <input v-model="product.id" type="text" readonly><br>
    <input v-model="product.title" type="text" placeholder="标题"><br>
    <input v-model="product.price" type="text" placeholder="价格"><br>
    <input v-model="product.saleCount" type="text" placeholder="销量"><br>
    <input type="button" value="修改" @click="updatePro()">
</div>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>

<script>
    let v = new Vue({
        el:"div",
        data:{
            product:{}
        },
        created: function (){
            //search获取地址后面的内容?id=xx
            let id = location.search.split("=")[1];
            axios.get("/selectPro?id="+id).then(function (response){
                v.product = response.data;
            })
        },
        methods:{
            updatePro(){
                axios.post("/updatePro",v.product).then(function (){
                    alert("修改成功!");
                    location.href = "/selectAll.html";
                })
            }
        }
    })
</script>
</body>
</html>